<template>
  <div class="select-table">
    <el-table
      class="mulSelectTable"
      ref="table"
      :data="table.data"
      border
      height="460"
      @selection-change="handleTableMultiCheck"
    >
      <el-table-column type="selection" :selectable="shouldBeSelect" width="55"></el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column
        v-for="item of column"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :key="item.prop"
      ></el-table-column>
    </el-table>
    <el-pagination
      :page-size="table.page.size"
      :current-page="table.page.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="table.page.total"
    ></el-pagination>
    <!-- <el-button type="primary" @click="submit" class="fr">提交</el-button> -->
  </div>
</template>

<script>
/*
 *  须知: 需要传入的有: column(表格列),hasSelectedData(已添加的数据),qryTableData(查询函数)
 *  qryTableData会在本组件调用时候,传入本组件的page参数, 与callback回调函数
 * */
export default {
  name: 'mulSelectTable',
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    column: {
      type: Array, // 表格列
      default: function () {
        return []
      },
    },
    hasSelectedData: {
      type: Array, // 已添加的数据
      default: function () {
        return []
      },
    },
    qryTableData: {
      // 查询函数,因函数中包含的接口是未知的,故要传入
      type: Function,
    },
  },
  data: function () {
    return {
      table: {
        data: [],
        page: {
          size: 20,
          current: 1,
          total: 0,
        },
        preSelectMap: {}, // 预添加数据, 避免因切换分页时流失数据
        mulSelection: [], // 多选参数
      },
    }
  },
  methods: {
    /*
     *  初始化查询
     * */
    init() {
      this.clearTableSelected()
      this.qryTableDataList()
    },
    /*
     *  查询表格
     * */
    qryTableDataList() {
      this.$emit('qryTableData', this.table.page, (res) => {
        this.setPageAndData(res)
        this.toggleSelection()
      })
    },
    /*
     *  设置分页与数据
     * */
    setPageAndData(res) {
      this.table.data = res.data.records
      this.table.page.total = res.data.total
    },
    /*
     *  清空添加
     * */
    clearTableSelected() {
      this.table.page.current = 1
      this.table.page.size = 20
      this.table.preSelectMap = {} // 清空预添加数据
      this.$refs.table && this.$refs.table.clearSelection()
    },
    // 多选数据
    submit() {
      this.$emit('mulSelectTable', this.table.mulSelection)
    },
    /*
     * 获取预添加数据更新到已添加数据中
     * */
    updateHasSelectedData() {
      this.table.preSelectMap[this.table.page.current] = this.table.mulSelection // 保存预添加数据
      Object.keys(this.table.preSelectMap).forEach((key) => {
        const preSelectData = this.table.preSelectMap[key]
        preSelectData.forEach((item) => {
          const has =
            this.hasSelectedData.filter((row) => {
              return item.id === row.id
            }).length > 0
          if (!has) {
            this.hasSelectedData.push(item)
          }
        })
      })
    },
    /*
     *  table checkbox添加
     * */
    handleTableMultiCheck(mul) {
      this.table.mulSelection = mul
    },
    /*
     * 标准弹出框table列是否能被添加
     * */
    shouldBeSelect(row) {
      return !this.hasSelectedData.some((selectedRow) => {
        row.has = selectedRow.id === row.id
        return row.has
      })
    },
    /*
     *  表格默认选中
     * */
    toggleSelection() {
      const preSelectMap = this.table.preSelectMap
      const current = this.table.page.current
      const preSelectDataInCurPage = preSelectMap[current] || []
      const hasSelectedData = this.hasSelectedData || []
      let rows = preSelectDataInCurPage // 预添加
      if (!preSelectMap.hasOwnProperty(current)) {
        rows = hasSelectedData // 已添加
      }
      if (rows && rows.length && this.table.data) {
        this.$nextTick(() => {
          rows.forEach((row) => {
            const selectedRow = this.table.data.filter((item) => {
              return row.id === item.id
            })[0]
            selectedRow &&
              this.$refs.table.toggleRowSelection(selectedRow, true)
          })
        })
      }
    },
    /*
     * 分页查询
     * */
    handleCurrentChange(val) {
      this.table.preSelectMap[this.table.page.current] = this.table.mulSelection // 保存预添加数据
      this.table.page.current = val
      this.qryTableDataList()
    },
    handleSizeChange(val) {
      this.table.preSelectMap[this.table.page.current] = this.table.mulSelection // 保存预添加数据
      this.table.page.size = val
      this.qryTableDataList()
    },
  },
  /* preSelectedNum() {
  let total = 0;
  const preSelectMap = this.table.preSelectMap;
  let preSelectDataList = [];
  Object.keys(preSelectMap).forEach(key => {
    preSelectDataList = preSelectDataList.concat(preSelectMap[key]);
  })
  this.table.mulSelection.forEach(item => {
    const has = preSelectDataList.filter(row => {
      return row.id === item.id;
    }).length > 0;
    !has && preSelectDataList.push(item);
  });
  preSelectDataList.forEach(item => {
    total += item.has ? 0 : 1;
  })
  return total;
}*/
}
</script>

<style lang="scss" scoped>
.select-table {
  height: 500px;
  .mulSelectTable .el-dialog__body {
    padding-bottom: 40px;
  }
}
</style>